Determining When to Use Class and ID Selectors

Use class selectors when you need to apply a style multiple times within a document and ID selectors for one-time only appearances of a style within a document.

In the following style sheet, #banner, #sub_banner, #nav1, #nav2, #footer, and #content are ID selectors and .title and .content are class selectors.

body {
 margin: 0;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: .75em;
 padding: 0;
}
#banner {
 margin-top: 0;
 margin-bottom: 0;
 background-color: #900;
 border-bottom: solid 1px #000;
 padding: 5px 5px 5px 10px;
 line-height: 75%;
 color: #fff;
}
#sub_banner {
 background-color: #ccc;
 border-bottom: solid 1px #999;
 font-size: .8em;
 font-style: italic;
 padding: 3px 0 3px 10px;
}
#content {
 position: absolute;
 margin-left: 18%;
 width: 40%;
 top: 100px;
 padding: 5px;
}
#nav1 {
 position: absolute;
 width: 30%;
 left: 60%;
 top: 100px;
 padding: 5px;
}
#nav2 {
 position: absolute;
 padding: 5px 5px 5px 10px;
 top: 100px;
 width: 15%;
}
#footer {
 text-align: center;
 padding-top: 7em;
}
.warning {
 font-weight: bold;
 color: red;
}
.title {
 font-size: 120%;
}
.content {
 font-family: Verdana, Arial, sans-serif;
 margin-left: 20px;
 margin-right: 20px;
}
.footer {
 font-size: 75%;
}

Apply the ID and class selectors into the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
 <head>
  <title>CSS Cookbook</title>
  <link href="1-2.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <div id="header">
  <h1>CSS Collection</h1>
  <h2>Showcase of CSS Web Sites</h2>
 </div>
 <div id="content">
  <h3>Content Page Title</h3>
  <p class="title">Content Item Title</p>
  <p class="content">Content goes here.</p>
 </div>
 <div id="navigation">
  <h3>List Stuff</h3>
  <a href="http://codetutorial.co.nr/">Submit a site</a><br />
  <a href="http://codetutorial.co.nr/">CSS resources</a><br />
  <a href="http://codetutorial.co.nr/">RSS</a><br />
  <h3>CSS Cookbook Stuff</h3>
  <a href="http://codetutorial.co.nr/">Home</a><br />
  <a href="http://codetutorial.co.nr/">About</a><br />
  <a href="http://codetutorial.co.nr/">Blog</a><br />
  <a href="http://codetutorial.co.nr/">Services</a><br />
 </div>
 <div id="blipverts">
  <h3>Ads go here.</h3>
 </div>
 <div id="siteinfo">
   <p class="footer">Copyright 2006</p>
  </div>
</body>
</html>

Discussion

The ID selectors identify unique attributes that have one instance in the document tree, whereas class selectors can be used frequently throughout the web page. Remember that ID selectors use a hash, "#", while class selectors begin with a period, ".".

Typically, web developers will use ID selectors to mark off unique sections of a web page. In the previously shown solution, notice that the page is divided into the following sections:

  • header

  • content

  • navigation

  • blipverts

  • siteinfo

By assigning these sections their own ID selector, designers are able to apply customized styles to those areas of the page, while keeping those same styles away from the other sections. This is accomplished through the combination of descendent selectors with ID selectors.

In the following example, the different H3 elements get different CSS rules:

#content h3 {
 font-size: 2em;
 font-weight: bold;
}
#navigation h3 {
 font-size: 0.8em;
 font-wieght: normal;
 text-decoration: underline;
}